/*
*
*试卷维护
*/
<template>
  <div id="testPaper">
    <!-- 头部面包屑 -->
    <div class="top_crumba">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>在线测试</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/testpapermanage' }">试卷维护</el-breadcrumb-item>
        <el-breadcrumb-item>维护试卷题目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 课程类型--成绩 -->
    <div class="test-paer-table">
      <div class="test-paer-name">{{tpTitle}}</div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          align="center"
          label="科目"
          width="180"
          prop="courseName"
          id="test-paer-title"
        >
          <!-- <span id="test-paer-title" prop="courseName"></span> -->
        </el-table-column>
        <el-table-column align="center" prop="choiceQuestionMin" label="选择题" width="180" class="a"></el-table-column>
        <el-table-column align="center" prop="completionMin" label="填空题"></el-table-column>
        <el-table-column align="center" prop="essayQuestionsMin" label="问答题"></el-table-column>
        <el-table-column  align="center" label="总分">{{sum}}</el-table-column>
      </el-table>
    </div>
    <!-- 题目类型 选择 填空 问答 题 -->
    <!-- 卡片布局 -->
    <!-- {{sum}} -->
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>题目类型</span>
          <el-radio v-model="radio" label="1" style="margin-left:20px;">选择题</el-radio>
          <el-radio v-model="radio" label="2">填空题</el-radio>
          <el-radio v-model="radio" label="3">问答题</el-radio>
        </div>
        <!-- 添加选择题 -->
        <div v-if="radio==1">
          <Choice :testPaperId="testPaperId" :radio="radio" @upSelectTopic="upSelectTopic"></Choice>
        </div>
        <!-- 添加填空题 -->
        <div v-if="radio==2">
          <Gap :testPaperId="testPaperId" :radio="radio" @upSelectTopic="upSelectTopic"></Gap>
        </div>
        <!-- 添加问答题 -->
        <div v-if="radio==3">
          <Que :testPaperId="testPaperId" :radio="radio" @upSelectTopic="upSelectTopic"></Que>
        </div>
      </el-card>
    </div>
    <!-- //选择题目 -->
    <div class="wrap">
      <SelectTopic :teStPaperInfo="teStPaperInfo" :sum="sum" @seleTopicM="seleTopicM"></SelectTopic>
    </div>
    <div class="wrap">
      <!-- //填空题目 -->
      <GapFilling :teStPaperInfo="teStPaperInfo" :sum="sum" @gapM="gapM"></GapFilling>
    </div>
    <div class="wrap">
      <!-- 问答题目 -->
      <Questions :teStPaperInfo="teStPaperInfo" :sum="sum"  @questiTopicM="questiTopicM"></Questions>
    </div>
  </div>
</template>

<script>
import SelectTopic from "../../components/GetTopic/SelectTopic";
import GapFilling from "../../components/GetTopic/GapFilling";
import Questions from "../../components/GetTopic/Questi";
import Choice from "../../components/SetTopic/Choice";
import Gap from "../../components/SetTopic/Gap";
import Que from "../../components/SetTopic/Questions";
export default {
  components: {
    SelectTopic,
    GapFilling,
    Questions,
    //题目的类型
    Choice,
    Gap,
    Que
  },
  data() {
    return {
      testPaperId: [],
      teStPaperInfo: "", //选择科目
      radio: "1",
      tpTitle: "", //试卷名称
      tableData: [
        {
          courseName: "", //科目名
          choiceQuestionMin: 0, //选择题
          completionMin: 0, //填空题
          essayQuestionsMin: 0 //问答题,
        }
      ]
    };
  },
  methods: {
    raDio() {
      console.log(this.radio);
    },
    //选择题分数
    seleTopicM(m) {
      this.tableData[0].choiceQuestionMin = m + "'";
    },
    //  问答题分数
    questiTopicM(m) {
      this.tableData[0].essayQuestionsMin = m + "'";
    },
    // 填空题
    gapM(m){
      this.tableData[0].completionMin=m+"'"
    },
    //获取试卷选择题的题目
    getSlectTopic() {
      //试卷ID
      let _this = this;
      _this.testPaperId = this.$route.query.id;
      _this.axios
        .get("/api/TestPaper/GetTestPaper?id=" + _this.testPaperId)
        .then(res => {
          _this.tpTitle = res.data.tpTitle;
          _this.tableData[0].courseName = res.data.courseName;
          console.log(res.data, "试卷维护");
          _this.teStPaperInfo = res.data;
          _this.teStPaperInfo.questions.forEach(item => (item.editing = false));
        })
        .catch(e => {
          console.log(e);
        });
    },
    //子组件调用更新数据
    upSelectTopic() {
      this.getSlectTopic();
    }
  },
  computed:{
      sum(){
        let _this =this;
        let m= _this.tableData.reduce((sun,item)=>{
         sun =parseInt(sun+item.choiceQuestionMin)+parseInt(item.completionMin)+parseInt(item.essayQuestionsMin)
          return sun
        },0)
         return m+"'";

    }
  },
  created() {
    //页面跳转携带的id
    let _this = this;
    _this.testPaperId = this.$route.query.id;
    _this.getSlectTopic();
  }
};
</script>

<style scoped lang="less">
.wrap {
  margin-top: 20px;
}
/deep/.is-leaf {
  color: #000;
}
/deep/.el-table td div {
  // color: red;
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
/deep/.el-table td:first-child div {
  background-color: transparent;
  color: #000 !important;
  font-size: 16px;
}
.test-paer-table {
  margin-top: 40px;
}
.test-paer-name {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 30px;
  width: 100%;
}
</style>
